{% extends "base.html" %}
{% block title %} BookList {% endblock %}
{% block style%}
<style type="text/css">
html * {
	padding: 0;
	margin: 0;
}

body * * {
	padding: 0;
}

body {
	font: small sans-serif;
}

body>div {
	border-bottom: 1px solid #ddd;
}

h1 {
	font-weight: normal;
}

h2 {
	margin-bottom: .8em;
}

h2 span {
	font-size: 80%;
	color: #666;
	font-weight: normal;
}

h3 {
	margin: 1em 0 .5em 0;
}

h4 {
	margin: 0 0 .5em 0;
	font-weight: normal;
}

td {
	font-size: 1em;
	padding: 3px 17px 2px 17px;
}

ul {
	margin-left: 2em;
	margin-top: 1em;
}

#summary {
	background: #e0ebff;
}

#summary h2 {
	font-weight: normal;
	color: #666;
}

#explanation {
	background: #eee;
}

#content {
	background: #f6f6f6;
	position: relative;
	top: 45px;
	margin-right: auto;
	margin-left: auto;
}

#summary table {
	border: none;
	background: transparent;
}

.navbar {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
}

</style>
{% endblock %}

{% block heading %}
<div class="page-header">
	<h1>Book</h1>
	<h2>List Records</h2>
</div>
{% endblock %}

{% block content %}
<div class="row">
	<div class="span8">
		{% for item in list_items %}
		<div class="row" style="padding-top: 10">
			<div class="span3 media-grid">
				<a href="{% url bookstoreapp.views.view_book item.id %}"> <img
					class="thumbnail" src="{{item.image_url}}" alt="">
				</a>
			</div>
			<div class="span-two-thirds">
				<h3>{{item.title}}</h3>
				<br /> {{item.description}} <br /> <br /> <br />
				<div class="row">
					<div class="span2">
						<h3>${{item.price|floatformat:"2"}}</h3>
					</div>
					<div class="span">
						<a class="btn btn-primary" bookid="{{item.id}}" href="">add to
							cart</a>
					</div>
				</div>
			</div>

		</div>
		{% endfor %}
	</div>

	<div class="span4">
		<h5>My Cart</h5>
		<table id="tabCart" class="condensed-table">
			<tbody id="items">
			</tbody>
			<tfoot>
				<tr>
					<td></td>
					<th>Total:</th>
					<td id="total_price">￥{{cart.total_price|floatformat:"2"}}</td>
				</tr>
			</tfoot>
		</table>

		<a class="btn btn-danger"
			href="{% url bookstoreapp.views.clean_cart %}">Clean Cart</a> <a
			class="btn btn-success"
			href="{% url bookstoreapp.views.view_cart %}">Check out</a>
	</div>
</div>
<div align="center">
	{% if list_items.has_previous %} <a href="?page={{ list_items.previous_page_number }}">Previous</a>
	{% endif %} <span class="current"> Page {{ list_items.number }} of {{ list_items.paginator.num_pages }}. </span>
	{% if list_items.has_next %} <a href="?page={{ list_items.next_page_number }}">Next</a>
	{% endif %}
</div>
{% endblock %} {% block js %}
<!--js from store.html-->
<script>
	function refreshCart(items) {
		total = 0;
		var tbody = $('tbody#items')[0];
		tbody.innerHTML = "";
		for (var i = 0; i < items.length; i++) {
			total += items[i].quantity * items[i].unit_price;
			$('table#tabCart').append(
					'<tr><td>' + items[i].quantity + 'x</td>' + '<td>'
							+ items[i].title + '</td><td>$'
							+ items[i].unit_price + '</td></tr>');
		}
		$('#total_price')[0].innerHTML = '$' + total;
	}
</script>
{% endblock %}

{% block on_ready %}
$.getJSON('/bookstore/api/cart/items/',refreshCart);

$('a.btn[bookid]').bind("click",function(){
	var book_id = $(this).attr("bookid");
	$.post("/bookstore/api/cart/items/",{book:book_id},refreshCart);
	}
);
{% endblock %}
